<template>
  <div class="user-item-wrapper" @click="handleUserItemClick">
    <div class="user-item">
      <div class="avatar">{{ initial }}</div>
      <div class="info">
        <div class="name-pos">
          <div class="name">
            {{ user.realName }}
          </div>

          <div v-show="user.postName" class="pos">
            {{ user.postName }}
          </div>
        </div>
        <div class="org-path ellipsis">
          {{ user.strDeptName || '' }}
        </div>
      </div>
      <div v-if="user.unreadCount" class="unread">
        {{ user.unreadCount }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
interface IProps {
  user: IContactor
  talk?: boolean
}
const props = defineProps<IProps>()
const initial = computed(() => {
  const { realName } = props.user
  return realName.slice(0, 1)
})

const router = useRouter()
const handleUserItemClick = () => {
  if (props.talk) {
    router.push({
      path: '/contact/talk',
      query: {
        id: props.user.id,
        initial: initial.value
      }
    })
  } else {
    router.push({
      path: '/contact/detail',
      query: {
        id: props.user.id
      }
    })
  }
}
</script>

<style lang="less" scoped>
.user-item-wrapper {
  width: 100%;
  padding-left: 16px;
  background-color: #fff;
  box-sizing: border-box;
}
.user-item {
  height: 68.5px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #e9e9e9;
  align-items: center;
  overflow: hidden;
  padding-right: 16px;
  box-sizing: border-box;
  overflow: hidden;

  .info {
    flex-grow: 1;
    width: 0;
  }
  .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #3a75c5;
    margin-right: 12px;
    color: #fff;
    font-size: 19px;
    text-align: center;
    line-height: 44px;
    flex-shrink: 0;
  }

  .unread {
    min-width: 15px;
    height: 15px;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    border-radius: 999px;
    background-color: red;
    text-align: center;
    padding: 0 5px;
  }

  .name-pos {
    display: flex;
    align-items: center;
    .name {
      color: #212121;
      font-size: 16px;
      font-weight: bold;
    }
    .pos {
      margin-left: 8px;
      font-size: 11px;
      color: #3a75c5;
      background: #3a75c519;
      border-radius: 1.5px;
      padding: 1.5px 6px;
      line-height: 1;
    }
  }

  .org-path {
    width: 300px;
    margin-top: 3px;
    line-height: 1;
    font-size: 13px;
    color: #2121217f;
  }
}
</style>
